import React, { Component } from 'react';

/*
参数:
fields={
  [
    {
      name: 'username',
      type: 'text',
      label: '用户名',
      placeholder: '请输入用户名',
      value: '' // 默认数据
    }
  ]
}
btns={
  [
    {
      text: '登录',
      type: 'primary',
      onClick: this.login.bind(this)
    }
  ]
}
getFormData方法，获取表单FormData对象
*/

class From extends Component {
  constructor (...args) {
    super(...args);
    this.state = {
      counts: {}
    }
  }
  getOrignalForm () {
    return this.refs.form;
  }
  getFormData () {
    let form = new FormData(this.refs.form);
    return form;
  }
  // 添加field
  addField (name) {
    // this.state.counts[name]++;
    console.log(this.state);
    this.setState({
      counts: {
        [name]: ++this.state.counts[name]
      }
    })
    // this.forceUpdate();
  }
  // 减少field
  minusField (name) {
    console.log(name);
    if (this.state.counts[name] !== 1) {
      this.setState({
        counts: {
          [name]: --this.state.counts[name]
        }
      })
    }
  }
  render() {
    return (
      <form ref="form">
        {
          this.props.fields && this.props.fields.map((field, index) => {
            let id = 'id_' + Math.floor(Math.random() * 100000);
            this.state.counts[field.name] = field.counts || this.state.counts[field.name] || 1;
            if (field.isArr) {
              return (
                <div className="form-group" key={index}>
                  <label>
                    {field.label}
                    <button type="button" className="btn btn-success" onClick={this.addField.bind(this, field.name)}>+</button>
                    <button type="button" className="btn btn-fail" onClick={this.minusField.bind(this, field.name)}>-</button>
                  </label>
                  {
                    Array.from(new Array(this.state.counts[field.name])).map((item, index) => (
                      <input
                        key={id + '_' + index}
                        type={field.type}
                        className="form-control"
                        name={field.name}
                        placeholder={field.placeholder} autoComplete="current-password"
                        defaultValue={field.value}
                      />
                    ))
                  }
                </div>
              )
            } else {
              if (field.label) {
                return (
                  <div className="form-group" key={index}>
                    <label htmlFor={id}>{field.label}</label>
                    <input
                      type={field.type}
                      className="form-control"
                      id={id}
                      name={field.name}
                      placeholder={field.placeholder} autoComplete="current-password"
                      defaultValue={field.value}
                    />
                  </div>
                )
              } else {
                return (
                  <input
                    key={index}
                    type={field.type}
                    className="form-control"
                    id={id}
                    name={field.name}
                    placeholder={field.placeholder} autoComplete="current-password"
                    defaultValue={field.value}
                  />
                )
              }
            }
          })
        }
        <div className="form-group" style={{textAlign: 'right'}}>
          {
            this.props.btns && this.props.btns.map((btn, index) => (
              <button onClick={btn.onClick} key={index} type="button" className={'btn btn-' + btn.type}>{btn.text}</button>
            ))
          }
        </div>
      </form>
    );
  }

}

export default From;
